import React, { useEffect, useState } from 'react';
import { Box, Flex, Image, Text } from '@chakra-ui/react';
import { Router, useRouter } from 'next/router';
import person_ustd from '@/assets/img/person_ustd.png';
import filter from '@/assets/img/filter.png';
import person_BND from '@/assets/img/person_BND.png';
import goBack from '@/assets/img/goBack.png';
import { queryDetail } from '@/services/person';
import { Button } from 'antd';
import MyModal from '@/components/MyModal';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useAccount } from 'wagmi';
import { toMillimeter } from '@/utils/utils';



const Detail = () => {
  const router = useRouter();
  const { id, name } = router.query;
  const [wallet, setWallet] = useState({} as WalletDetail)
  const [logList, setLogList] = useState([] as logDetail[])
  const [productType, setProductType] = useState(''); // 传递弹窗的类型
  const [showModal, setShowModal] = useState(false); // 是否展示弹窗
  const [walletInfo, setWalletInfo] = useState({} as WalletInfo) // 弹窗传参
  const { address, isConnected } = useAccount();

  const { t } = useTranslation();
  const dispatch = useDispatch()

  //   提币或充值按钮
  const handelShowModal = (type: string) => {
    setProductType(type);
    setShowModal(true);
  };

  // 弹窗的回调
  const isShowModal = (flag: boolean) => {
    setShowModal(flag);
    getDetailInfo()
  };

  // 资产详情接口
  const getDetailInfo = () => {
    queryDetail({ id, address }).then((res) => {
      const data = res.data as WalletDetail
      const walletInfo =
      {
        balance: data.balance,
        feeRate: data.feeRate,
        id: data.id,
        businessContractAddress: data.businessContractAddress,
        coinContractAddress: data.coinContractAddress,
        coin: data.coin,
        message: data.message,
      }
      setWallet(data)
      setWalletInfo(walletInfo)
      setLogList(data.logs)
    })
  }

  // 获取资产详情
  useEffect(() => {
    if (id) {
      getDetailInfo()
    }
  }, [id, name])

  //更新地址
  useEffect(() => {
    if (address) {
      dispatch({ type: 'ADDRESS', payload: address })
    }
  }, [address])


  return (
    <Box w={'100%'} boxSizing="border-box">

      <Box p={'20px 20px'}>
        <Flex>
          <Image src={goBack.src} w={20} h={18} onClick={() => router.back()} alt="go_back"></Image>
          <Box flex={1} textAlign={'center'}>
            {name}
          </Box>
        </Flex>

        {/* 余额 */}
        <Flex borderRadius={4} bgColor={'white'} p={'20px 16px 20px'} mt={14} justify={'space-between '}>
          <Image src={name === 'USDT' ? person_ustd.src : person_BND.src} w={30} h={30} mr={13} alt="icon"></Image>
          <Text fontSize={24} fontWeight={700} m={0} lineHeight={'36px'}>
            {toMillimeter(wallet.balance)}
          </Text>
        </Flex>

        {/* 明细 */}
        <Box mt={22} mb={70}>
          <Flex justify={'space-between'} align={'center'}>
            <Text m={0} fontSize={12} lineHeight={'36px'}>
              {t('person.Transaction_details')}
            </Text>
            {/* <Image src={filter.src} w={17} h={17} alt="filter"></Image> */}
          </Flex>
          <Box>
            {logList &&
              logList.map((item, index) => (
                <Flex key={index} justify={'space-between'} mt={20}>
                  <Box>
                    <Text m={0} fontSize={12} lineHeight={'18px'}>
                      {item.opRemark}
                    </Text>
                    <Text m={0} mt={4} fontSize={10} lineHeight={'15px'} color={'#8C8C8C'}>
                      {new Date(item.createTime).toLocaleString()}
                    </Text>
                  </Box>
                  <Text m={0} fontSize={16} lineHeight={'24px'} color={Number(item.opValue) > 0 ? '#375BE2' : '#43C266'}>
                    {toMillimeter(item.opValue)} {wallet.coin}
                  </Text>
                </Flex>
              ))}
          </Box>
        </Box>

      </Box>
      {/* 充提按钮 */}
      <Flex position={'fixed'} bottom={0} w={'100%'} h={70} bgColor={'#fff'} justify={'space-around'} align="center">
        {/* <Flex justify={'space-between'}> */}
        <Button
          type="primary"
          style={{
            width: '150px',
            height: '40px',
            fontSize: '16px',
            fontWeight: '600',
            backgroundColor: wallet.withdrawEnable === 0 ? '#C2C2C2' : '#375BE2',
          }}
          disabled={wallet.withdrawEnable === 0}
          onClick={() => handelShowModal('extract')}
        >
          {t('button.Recharge')}
        </Button>
        <Button
          type="primary"
          style={{
            width: '150px',
            height: '40px',
            fontSize: '16px',
            lineHeight: '27px',
            fontWeight: '600',
            backgroundColor: '#45CCA2',
            borderRadius: '4px',
          }}
          onClick={() => handelShowModal('Recharge')} // Limit是购买额度， 后面需要提取出来
        >
          {t('button.Withdraw')}
        </Button>
        {/* </Flex> */}
      </Flex>
      {showModal && <MyModal type={productType} data={{ walletInfo }} isShowModal={isShowModal} />}

    </Box >
  );
};

export default Detail;
